/**
 * @author Pop
 * 
 * 此插件将会创建一个键盘
 */
layui.define(['jquery'], function(exports) {
	"use strict";
	var MODULE_NAME = 'keyboard',
		$ = layui.jquery,
		clazz = {};
		
		var KEY_BOARD_CONTAINER = [
		'<style type="text/css">',
		'.keyboard-key-backspace:hover{background-color:#1E9FFF ;}',
		'.keyboard-key:hover{background-color:#1E9FFF ;}',
		'.keyboard-key,.keyboard-key-backspace,.keyboard-key-right{cursor: pointer;position: relative;width: 6.2%;outline: 1px solid black;height: 100%;float: left;background-color: #393D49;color: white;}',
		'.keyboard-key-backspace{width: 12.5%;}',
		'.keyboard-key-left-span{display: block;padding: 5px;}',
		'.keyboard-key-left-hidden{display: block;}',
		'.keyboard-key-left-center{display: block;font-size: 20px;position: absolute;top: 50%;left: 50%;margin-top: -5px;margin-left: -5px;}',
		'.keyboard-key-right{width: 50%;}',
		'.keyboard-key-right:hover{background-color: #1E9FFF;}',
		'</style>',
			'<div class="layui-row" style="width:100%;height:100%;background-color:#393D49;">',
			'<div class="layui-col-xs10 layui-col-sm10 layui-col-md10" style="height: 100%;">',
			'<div style="height:20%;">',
			'<div class="keyboard-key"><span class="keyboard-key-left-span Esc">Esc</span></div><div class="keyboard-key Key-dot"><span class="keyboard-key-left-span">~</span><span class="keyboard-key-left-center">`</span></div><div class="keyboard-key Key-1"><span class="keyboard-key-left-span">!</span><span class="keyboard-key-left-center">1</span></div><div class="keyboard-key Key-2"><span class="keyboard-key-left-span">@</span><span class="keyboard-key-left-center">2</span></div><div class="keyboard-key Key-3"><span class="keyboard-key-left-span">#</span><span class="keyboard-key-left-center">3</span></div><div class="keyboard-key Key-4"><span class="keyboard-key-left-span">$</span><span class="keyboard-key-left-center">4</span></div><div class="keyboard-key Key-5"><span class="keyboard-key-left-span">%</span><span class="keyboard-key-left-center">5</span></div><div class="keyboard-key Key-6"><span class="keyboard-key-left-span">^</span><span class="keyboard-key-left-center">6</span></div><div class="keyboard-key Key-7"><span class="keyboard-key-left-span">&</span><span class="keyboard-key-left-center">7</span></div><div class="keyboard-key Key-8"><span class="keyboard-key-left-span">*</span><span class="keyboard-key-left-center">8</span></div><div class="keyboard-key Key-9"><span class="keyboard-key-left-span">(</span><span class="keyboard-key-left-center">9</span></div><div class="keyboard-key Key-0"><span class="keyboard-key-left-span">)</span><span class="keyboard-key-left-center">0</span></div><div class="keyboard-key Key-11"><span class="keyboard-key-left-span">_</span><span class="keyboard-key-left-center">-</span></div><div class="keyboard-key Key-12"><span class="keyboard-key-left-span">+</span><span class="keyboard-key-left-center">=</span></div><div class="keyboard-key-backspace Key-backspace"><span class="keyboard-key-left-span">Backspace</span></div>',
			'</div>',
			'<div style="height:20%;">',
			'<div class="keyboard-key-backspace Tab" style="width:10%;"><span class="keyboard-key-left-span">Tab</span></div><div class="keyboard-key q"><span class="keyboard-key-left-span">q</span></div><div class="keyboard-key w"><span class="keyboard-key-left-span">w</span></div><div class="keyboard-key e"><span class="keyboard-key-left-span">e</span></div><div class="keyboard-key r"><span class="keyboard-key-left-span">r</span></div><div class="keyboard-key t"><span class="keyboard-key-left-span">t</span></div><div class="keyboard-key y"><span class="keyboard-key-left-span">y</span></div><div class="keyboard-key u"><span class="keyboard-key-left-span">u</span></div><div class="keyboard-key i"><span class="keyboard-key-left-span">i</span></div><div class="keyboard-key o"><span class="keyboard-key-left-span">o</span></div><div class="keyboard-key p"><span class="keyboard-key-left-span">p</span></div><div class="keyboard-key Brackets-left"><span class="keyboard-key-left-span">{</span><span class="keyboard-key-left-center">[</span></div><div class="keyboard-key Brackets-right"><span class="keyboard-key-left-span">}</span><span class="keyboard-key-left-center">]</span></div><div class="keyboard-key Slash"><span class="keyboard-key-left-span">|</span><span class="keyboard-key-left-center">\\</span></div><div class="keyboard-key Del" style="width: 8.6%;"><span class="keyboard-key-left-span">Del</span></div>',
			'</div>',
			'<div style="height:20%;">',
			'<div class="keyboard-key-backspace Caps" style="width: 13.4%;"><span class="keyboard-key-left-span">Caps</span></div><div class="keyboard-key a"><span class="keyboard-key-left-span">a</span></div><div class="keyboard-key s"><span class="keyboard-key-left-span">s</span></div><div class="keyboard-key d"><span class="keyboard-key-left-span">d</span></div><div class="keyboard-key f"><span class="keyboard-key-left-span">f</span></div><div class="keyboard-key g"><span class="keyboard-key-left-span">g</span></div><div class="keyboard-key h"><span class="keyboard-key-left-span">h</span></div><div class="keyboard-key j"><span class="keyboard-key-left-span">j</span></div><div class="keyboard-key k"><span class="keyboard-key-left-span">k</span></div><div class="keyboard-key l"><span class="keyboard-key-left-span">l</span></div><div class="keyboard-key Semicolon"><span class="keyboard-key-left-span ">:</span><span class="keyboard-key-left-center">;</span></div><div class="keyboard-key Comma"><span class="keyboard-key-left-span">"</span><span class="keyboard-key-left-center">,</span></div><div class="keyboard-key-backspace Enter" style="width: 17.6%;"><span class="keyboard-key-left-span">Enter</span></div>',
			'</div>','<div style="height:20%;">',
			'<div class="keyboard-key-backspace Shift" style="width: 17.6%;"><span class="keyboard-key-left-span">Shift</span></div><div class="keyboard-key z"><span class="keyboard-key-left-span">z</span></div><div class="keyboard-key x"><span class="keyboard-key-left-span">x</span></div><div class="keyboard-key c"><span class="keyboard-key-left-span">c</span></div><div class="keyboard-key v"><span class="keyboard-key-left-span">v</span></div><div class="keyboard-key b"><span class="keyboard-key-left-span">b</span></div><div class="keyboard-key n"><span class="keyboard-key-left-span">n</span></div><div class="keyboard-key m"><span class="keyboard-key-left-span">m</span></div><div class="keyboard-key Anglebracket-left"><span class="keyboard-key-left-span">\<</span><span class="keyboard-key-left-center">,</span></div><div class="keyboard-key Anglebracket-right"><span class="keyboard-key-left-span">\></span><span class="keyboard-key-left-center">.</span></div><div class="keyboard-key Question"><span class="keyboard-key-left-span">?</span><span class="keyboard-key-left-center">/</span></div><div class="keyboard-key Cursor-top" ><span class="keyboard-key-left-span">↑</span></div><div class="keyboard-key-backspace Shift-right" style="width: 13.4%;" ><span class="keyboard-key-left-span" >Shift</span></div>',
			'</div>',
			'<div style="height:20%;">',
			'<div class="keyboard-key Fn"><span class="keyboard-key-left-span">Fn</span></div><div class="keyboard-key Ctrl-left"><span class="keyboard-key-left-span">Ctrl</span></div><div class="keyboard-key Win"><span class="keyboard-key-left-span"><i class="layui-icon layui-icon-windows"></i></span></div><div class="keyboard-key Alt-left"><span class="keyboard-key-left-span">Alt</span></div><div class="keyboard-key Space" style="width: 36.2%;"><span class="keyboard-key-left-span">Space</span></div><div class="keyboard-key Alt-right"><span class="keyboard-key-left-span">Alt</span></div><div class="keyboard-key Ctrl-right"><span class="keyboard-key-left-span">Ctrl</span></div><div class="keyboard-key Cursor-left"><span class="keyboard-key-left-span">←<span></div><div class="keyboard-key Cursor-down"><span class="keyboard-key-left-span">↓<span></div><div class="keyboard-key Cursor-right"><span class="keyboard-key-left-span">→<span></div><div class="keyboard-key List" style="width: 7.2%;"><span class="keyboard-key-left-span"><i class="layui-icon layui-icon-list"></i></span></div>',
			'</div>',
			'</div>',
			'<div class="layui-col-xs2 layui-col-sm2 layui-col-md2" style="height: 100%;">',
			'<div style="height:20%;">',
			'<div class="keyboard-key-right Home"><span class="keyboard-key-left-span">Home</span></div>',
			'<div class="keyboard-key-right PgUp"><span class="keyboard-key-left-span">PgUp</span></div>',
			'</div>',
			'<div style="height:20%;">',
			'<div class="keyboard-key-right End"><span class="keyboard-key-left-span">End</span></div>',
			'<div class="keyboard-key-right PgDn"><span class="keyboard-key-left-span">PgDn</span></div>',
			'</div>',
			'<div style="height:20%;">',
			'<div class="keyboard-key-right Insert"><span class="keyboard-key-left-span">Insert</span></div>',
			'<div class="keyboard-key-right Delete"><span class="keyboard-key-left-span">Delete</span></div>',
			'</div>',
			'<div style="height:20%;">',
			'<div class="keyboard-key-right PrtScn"><span class="keyboard-key-left-span">PrtScn</span></div>',
			'<div class="keyboard-key-right ScrLk"><span class="keyboard-key-left-span">ScrLk</span></div>',
			'</div>',
			'<div style="height:20%;">',
			'<div class="keyboard-key-right Pause"><span class="keyboard-key-left-span">Pause</span></div>',
			'<div class="keyboard-key-right Break"><span class="keyboard-key-left-span">Break</span></div>',
			'</div>',
			'</div>',
			'</div>'
		].join('');
		
		var KeyBoard = function(options){
			var that = this,
			config = $.extend({}, that.config, options);
			that.elem = $("#"+config.elem);
			that.elem.append(KEY_BOARD_CONTAINER);
			that.keys = function(arr){
				if(Array.isArray(arr)){
					var that = this,
						elem = that.elem;
					$.each(arr,function(index,value,ar){
						elem.find('.'+value).css({
							"background": "#1E9FFF"
						});
					});
				}
			}
			that.fn = function(arr){
				if(Array.isArray(arr)){
					var that = this,
						elem = that.elem;
					var cssParam = {
						"background": "#009688",
						"color": "white",
					};
					elem.find('.Fn').css(cssParam);
					$.each(arr,function(index,value,ar){
						elem.find('.'+value).css(cssParam);
					});
				}
			}
			that.shift = function(arr){
				if(Array.isArray(arr)){
					var that = this,
						elem = that.elem;
					var cssParam = {
						"background": "white",
						"color": "black",
					};
					elem.find('.Shift').css(cssParam);
					$.each(arr,function(index,value,ar){
						elem.find('.'+value).css(cssParam);
					});
				}
			}
		};
		KeyBoard.prototype.config = {
			elem:''
		};
		clazz.render = function(option){
			return new KeyBoard(option);
		};
		exports(MODULE_NAME, clazz);
});
